<template>
  <div>
    <introduce>
      <span class="title-gray" slot="pre">设备/</span>
      <span class="title-bold" slot="title"> 节点群组</span>
      <span slot="info">
        -
        以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。</span
      >
    </introduce>
    <el-card class="search-wrap">
      <el-form>
        <el-form-item label="群组名称:">
          <el-input
            placeholder="群组名称"
            style="width: 120px; margin-right: 10px"
            v-model="query.keyword"
          ></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
          <span style="margin-left: 30px">搜索结果：{{ total }}</span>
        </el-form-item>
        <el-button type="primary" class="addbtn" @click="handleAdd"
          >新建分组+</el-button
        >
      </el-form>
    </el-card>
    <el-table :data="groupList" stripe style="width: 100%; margin-top: 10px">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column
        prop="groupName"
        label="群组名称"
        width="180"
      ></el-table-column>
      <el-table-column prop="nodeNums" label="传感器节点数量">
      </el-table-column>
      <el-table-column prop="onlineNums" label="在线设备数量">
      </el-table-column>
      <el-table-column label="创建时间" prop="cTime"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            @click="showDialog(scope.row.id, scope.row.groupName)"
            type="mini"
            >重命名</el-button
          >
          <el-button @click="remove(scope.row)" type="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="editId == '' ? '新建群组' : '修改群组'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="群组名称" prop="groupName">
          <el-input v-model="ruleForm.groupName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { $groupList, $groupAdd, $groupDel, $groupEdit } from "@/api/index";
import Introduce from "@/components/Introduce.vue";
export default {
  name: "groupView",
  data() {
    return {
      groupList: [],
      total: 0,
      editId: "",
      dialogVisible: false,
      query: {
        currPage: 1,
        pageSize: 5,
        keyword: "",
      },
      ruleForm: {
        groupName: "",
      },
      rules: {
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    showDialog(id, groupName) {
      this.dialogVisible = true;
      this.editId = id;
      this.ruleForm.groupName = groupName;
    },
    remove(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $groupDel({ id: row.id }).then((res) => {
            if (res.data.msg == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getGroupList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editItem() {
      $groupEdit({ id: this.editId, groupName: this.ruleForm.groupName }).then(
        (res) => {
          console.log(res);
        }
      );
      this.getGroupList();
    },
    handleOK() {
      this.dialogVisible = false;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.editId !== "") {
            this.editItem();
          } else {
            this.addGroup();
          }
        } else {
          this.$message.error("群组名称不能为空");
          return false;
        }
      });
    },
    handleAdd() {
      this.dialogVisible = true;
      this.editId = "";
      this.ruleForm.groupName = "";
    },
    addGroup() {
      $groupAdd({ groupName: this.ruleForm.groupName }).then((res) => {
        console.log(res);
        this.$message.success("添加成功");
      });
      this.getGroupList();
    },
    handleSizeChange(count) {
      this.query.pageSize = count;
      this.query.currPage = 1;
      this.getGroupList();
    },
    handleCurrentChange(page) {
      this.query.currPage = page;
      this.getGroupList();
    },
    search() {
      this.getGroupList();
      console.log(1);
    },
    getGroupList() {
      $groupList(this.query).then((res) => {
        console.log(res);
        this.groupList = res.data.data;
        this.total = res.data.total;
        // this.groupList.forEach((item) => {
        //   item.cTime = item.cTime.slice(0, 10) + " " + item.cTime.slice(10);
        // });
      });
    },
  },
  mounted() {
    this.getGroupList();
  },
  components: {
    Introduce,
  },
};
</script>

<style lang="less" scoped>
.block {
  text-align: center;
}
.search-wrap {
  margin-top: 10px;
  height: 60px;
  padding: 5px 20px;
  position: relative;
  .el-card__body {
    padding: 0px;
  }
  .addbtn {
    position: absolute;
    top: 22px;
    right: 30px;
  }
}
</style>
